import React from 'react';
import { Button, Dialog, Image, Popover, Toast } from 'antd-mobile';
import { OrderItem as Order } from '@/type/ConsultOrder';
import doctor from '@/assets/images/avatar-doctor.svg';
import { OrderType } from '@/enum';
import { cancelOrder, deleteOrder } from '@/store/modules/consultStore';
import { useEnhanceDispatch } from '@/hooks';
import { useNavigate } from 'react-router-dom';
import { Action } from 'antd-mobile/es/components/popover';
import './OrderItem.scss';


interface OrderItemProps {
  order: Order;
  deleteSuccess: (id: string) => void;
  cancelSuccess: (id: string) => void;
}

const OrderItem: React.FunctionComponent<OrderItemProps> = ({ order, deleteSuccess, cancelSuccess }) => {
  const enhanceDispatch = useEnhanceDispatch();
  const navigate = useNavigate();
  const actions = [
    { key: '1', text: '查看处方' },
    { key: '2', text: '删除订单' },
  ];

  /**
   * @description 删除订单的回调函数
   * */
  const handleDeleteOrder = async (id: string) => {
    const confirm = await Dialog.confirm({ content: '确定删除订单?', header: '温馨提示' });
    if (!confirm) return;
    try {
      const deleteMessage = await enhanceDispatch(deleteOrder(id)).unwrap();
      deleteSuccess(id);
      Toast.show({ icon: 'success', content: deleteMessage });
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  /**
   * @description 取消订单的回调函数
   * */
  const handleCancelOrder = async (id: string) => {
    const confirm = await Dialog.confirm({ content: '确定取消问诊订单?', header: '温馨提示' });
    if (!confirm) return;
    try {
      const deleteMessage = await enhanceDispatch(cancelOrder(id)).unwrap();
      cancelSuccess(id);
      Toast.show({ icon: 'success', content: deleteMessage });
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  /**
   * @description当使用菜单列表时，选中菜单的回调
   * */
  const onAction = (action: Action) => {
    if (action.key === '2') {
      handleDeleteOrder(order.id);
    }
  };

  const renderButtonStatus = () => {
    if (order.status === OrderType.ConsultPay) {
      return (
        <>
          <Button className="gray" size="small" onClick={() => handleCancelOrder(order.id)}>取消问诊</Button>
          <Button color="primary" size="small">去支付</Button>
        </>
      );
    } else if (order.status === OrderType.ConsultWait) {
      return (
        <>
          <Button className="gray" size="small" onClick={() => handleCancelOrder(order.id)}>取消问诊</Button>
          <Button color="primary" size="small">继续沟通</Button>
        </>
      );
    } else if (order.status === OrderType.ConsultChat) {
      return (
        <>
          <Button className="gray" size="small">查看处方</Button>
          <Button color="primary" size="small">继续沟通</Button>
        </>
      );
    } else if (order.status === OrderType.ConsultComplete) {
      return (
        <>
          <Button className="gray" size="small">问诊记录</Button>
          <Button color="primary" size="small">{order.evaluateId ? '查看评价' : '去评价'}</Button>
        </>
      );
    } else if (order.status === OrderType.ConsultCancel) {
      return (
        <>
          <Button className="gray" size="small" onClick={() => handleDeleteOrder(order.id)}>删除订单</Button>
          <Button color="primary" size="small" onClick={() => navigate('/')}>咨询医生</Button>
        </>
      );
    }
  };

  const renderMore = () => {
    if (order.status === OrderType.ConsultComplete) {
      return (
        <div className="more">
          <Popover.Menu placement="right-start" trigger="click" actions={actions} onAction={onAction}>
            <span>更多</span>
          </Popover.Menu>
        </div>
      );
    }
  };

  return (
    <div className="order-item">
      <div className="head van-hairline--bottom" onClick={() => navigate(`/consult-detail/${order.id}`)} >
        <Image className="img" src={doctor}/>
        <p>{order.docInfo?.name || '暂未分配医生'}</p>
        <span>{order.statusValue}</span>
      </div>
      <div className="body">
        <div className="body-row">
          <div className="body-label">病情描述</div>
          <div className="body-value">{order.illnessDesc}</div>
        </div>
        <div className="body-row">
          <div className="body-label">价格</div>
          <div className="body-value">¥ {order.payment.toFixed(2)}</div>
        </div>
        <div className="body-row">
          <div className="body-label">创建时间</div>
          <div className="body-value tip">{order.createTime}</div>
        </div>
      </div>
      <div className="foot">
        {
          renderMore()
        }
        {
          renderButtonStatus()
        }
      </div>
    </div>
  );
};

export default OrderItem;